<template lang="html">
  <div class="info_cont01 bor_top">
    <h4 class="title"><span class="mr15">支付信息</span><span class="title_info">选择分期收款，剩余未收款项可能存在收回风险并需自行承担相关风险及责任，平台对此将不承担任何责任且不会提供任何形式的协助。</span></h4>
    <div class="sub_info_cont02 box_graybg mt30">
      <div class="dd_price_cont01">
        <table class="table_fix table_gray01">
          <colgroup>
            <col style="width:80px;">
            <col style="width:220px;">
            <col style="width:80px;">
            <col>
          </colgroup>
          <tbody>
            <tr>
              <th class="t_l">订单总额</th>
              <td class="t_l" colspan="3">
                <div class="input_box03 mr15">
                  <state-input
                    class="input_type pay_width01"
                    type="text"
                    name="order.TotalAmount"
                    v-bind:transformer="toPositiveInteger"
                    @input-value-changed="onAmountChanged"
                  />
                  <span class="text">元</span>
                </div>
                预估结算价为：10000元</td>
            </tr>
            <tr v-for="(instalment, index) in instalments">
              <th class="t_l">一期款</th>
              <td class="t_l">
                <div class="input_box03 mr_1">
                  <state-input
                    :name="instalmentInputName(index, 'Percent')"
                    type="text"
                    class="input_type pay_width03"
                    placeholder="0"
                    @input-blur="onPercentageBlurChanged"
                    :index="index"
                    :transformer="toPositiveInteger"
                    :readonly="index === instalments.length - 1"
                  />
                  <span class="text">%</span>
                </div>
                <div class="input_box03">
                  <state-input
                    class="input_type pay_width04"
                    placeholder="请输入金额"
                    :name="instalmentInputName(index, 'MayReceive')"
                    :transformer="toPositiveInteger"
                    :index="index"
                    @input-blur="onMoneyBlurChanged"
                    v-bind:readonly="index === instalments.length - 1"
                  />
                  <span class="text">元</span>
                </div>
              </td>
              <th class="t_l">最晚付款</th>
              <td class="t_l">
                <span class="pay_date pay_width07">2017-2-1<em class="ml10">18:00</em></span><span class="green ml10">已付款</span>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 注意内容 S-->
        <div class="dd_price_noticebox">
          <h6>注意：</h6>
          <ol class="notice_ol">
            <li>一期款录入比例需大于0，1期+2期分期比例之和须大于等于30%</li>
            <li>最晚付款时间为北京时间</li>
          </ol>
        </div>
        <!-- 注意内容 E-->
      </div>
      <div class="edit_cont01"><a href="" class="mr5 blue_btnlink inlinebox">保存</a><a href="" class="ml5 new_btn grey_btn grey_btn03">取消</a></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import StateInput from './Input.vue'
import * as $helpers from '../utils/helpers'

export default {
  components: { StateInput },
  computed: {
    ...mapGetters({
      'order': 'getOrder',
      'instalments': 'getInstalments'
    }),
  },
  methods: {
    ...mapActions({
      'updateOrderAmount': 'updateOrderAmount'
    }),
    toNumber: $helpers.toNumber,
    toInteger: $helpers.toInteger,
    toPositiveInteger: $helpers.toPositiveInteger,
    instalmentInputName(index, type) {
      return `instalments.${index}.${type}`
    },
    onAmountChanged(newValue) {
      this.$store.commit('updateInstalmentsWhenTotalAmountChanged', { totalAmount: newValue })
    },
    onPercentageBlurChanged(index) {
      this.$store.commit('UPDATE_INSTALMENTS_VIA_PERCENTAGE_BLURED', { index })
    },
    onMoneyBlurChanged(index) {
      this.$store.commit('UPDATE_INSTALMENTS_VIA_MONEY_BLURED', { index })
    }
  }
}
</script>

<style lang="css">
</style>
